<!--  -->
<template>
  <div class="productdetails">
    <!-- <Header-Comp title="产品详情" /> -->
    <div class="productdetails_contents">
      <img v-for="(itme,index) in imgList" :src="itme" alt :key="index" />
    </div>
    <div class="quest" v-if="toolTip">{{toolTipContext}}</div>
    <div class="depositNotice" v-if="getRewardRules">
      规则
      <van-icon name="question" size="14" @click="handleQuery" />
      :{{getRewardRules}}
    </div>
    <!-- <van-button class="productdetails_but"
                size="small"
                round
                block
                type="info"
                native-type="onSubmit"
                @click="onPay">去支付
    </van-button>-->
    <div v-html="form"></div>
  </div>
</template>

<script>
import { Dialog } from "vant";
import {
  DetailBySn,
  detail,
  depositPay,
  query,
  getRewardRule,
  getInfoByTenantId
} from "@/api/productdetails";
import { signature } from "@/utils/utils";
export default {
  components: { HeaderComp: () => import("@/components/HeaderComp") },
  data() {
    //这里存放数据
    return {
      toolTip: false,
      toolTipContext: "",
      data: {},
      imgList: [],
      form: null,
      timer: "",
      payId: null,
      getRewardRules: ""
    };
  },
  async created() {
    // if (this.$route.query.token) {
    //   localStorage.setItem('fuhuibatoken', this.$route.query.token)
    // }
    // alert(localStorage.getItem('fuhuibatoken'), "localStorage.getItem('fuhuibatoken')--")
    // || '000024066571900730000190'
    let companyInfo = await getInfoByTenantId({
      tenantId : this.$route.query.tenantId || "000001"
    })
    companyInfo = companyInfo.data
    DetailBySn(
      this.$route.query.equipSN,
      this.$route.query.deptId || "1123598813738675201"
    ).then(res => {
      if (res.code === 200) {
        this.data = res.data;
        // || 1242
        detail(this.data.equipType).then(det => {
          if (det.code === 200) {
            this.imgList = det.data.imgList || [];
            // 获取机构名称
            const deptNo = det.data.deptNo;
            console.log(det.data.deptNo);
            // 定义弹窗对应机构文案，后续可改成配置项，方便及时调整和添加
            // const dialogContent = {
            //   XIANGSAO:
            //     "如您点击“同意”并按操作提示完成终端开通服务费，则代表您同意授权向享扫支付终端开通服务费，具体扣款金额以您的交易记录为准。详询：400-855-9595",
            //   FUHUIBA:
            //     "如您点击“同意”并按操作提示完成终端开通服务费，则代表您同意授权向付惠吧支付终端开通服务费，具体扣款金额以您的交易记录为准。详询：400-686-3636",
            //   HEZHIFU:
            //     "如您点击“同意”并按操作提示完成终端开通服务费，则代表您同意授权向易码富支付终端开通服务费，具体扣款金额以您的交易记录为准。详询：400-855-9595",
            //   XIANGSAOJIGOU32:
            //     "如您点击“同意”并按操作提示完成终端开通服务费，则代表您同意授权向享扫支付终端开通服务费，具体扣款金额以您的交易记录为准。详询：400-855-9595"
            // };
            const dialogContent = `如您点击“同意”并按操作提示完成终端开通服务费，则代表您同意授权向${companyInfo.companyName}支付终端开通服务费，具体扣款金额以您的交易记录为准。详询：${companyInfo.consumerHtline}`
            Dialog.confirm({
              title: "交易提示",
              confirmButtonText: "同意",
              cancelButtonText: "返回",
              confirmButtonColor: "#FFB72F",
              message:
              dialogContent ||
                "获取文案失败！请检查机构文案是否配置！"
            })
              .then(res => {
                signature();
                //this.$router.push('recharge')
              })
              .catch(() => {
                document.title = "返回APP";
                this.$router.go(-1);
              });
          }
        });
      }
    });

    getRewardRule({ equipSN: this.$route.query.equipSN }).then(res => {
      if (res.data.reward) {
        this.getRewardRules = res.data.rewardRule;
        this.toolTipContext = res.data.transRule;
      }
    });

    // console.log(this.agentInfo);
    // Dialog.confirm({
    //   title: "交易提示",
    //   confirmButtonText: "同意",
    //   cancelButtonText: "返回",
    //   confirmButtonColor: "#FFB72F",
    //   message:
    //     "如您点击“同意”并按操作提示完成终端开通服务费，则代表您同意授权向享扫支付终端开通服务费，具体扣款金额以您的交易记录为准。详询：400-855-9595"
    // })
    //   .then(res => {
    //     signature();
    //     //this.$router.push('recharge')
    //   })
    //   .catch(() => {
    //     document.title = "返回APP";
    //     this.$router.go(-1);
    //   });
    // || '000024066571900730000190' || 4260 || 4790
    // var obj = {
    //   equipSN: this.$route.query.equipSN,
    //   merchantId: this.$route.query.merchantId,
    //   storeId: this.$route.query.storeId
    // }
    // depositPay(obj).then(pay => {
    //   this.form = pay.data.form
    //   this.payId = pay.data.payId
    // })
  },
  methods: {
    handleQuery() {
      this.toolTip = !this.toolTip;
    },
    onPay() {
      document.title = "支付中";
      document.forms[0].submit();
      clearInterval(this.timer);
      this.timer = setInterval(this.getOrder, 3000);
    },
    getOrder() {
      query(this.payId).then(res => {
        if (res.code === 200) {
          if (Number(res.data) === 2) {
            clearInterval(this.timer);
            this.$router.push({
              path: "/productdetails/payorder",
              query: {
                code: res.data
              }
            });
          }
          if (Number(res.data) === 3) {
            clearInterval(this.timer);
            this.$router.push({
              path: "/productdetails/payorder",
              query: {
                code: res.data.code
              }
            });
          }
        }
      });
    },
    beforeDestroy() {
      document.title = "产品详情";
      clearInterval(this.timer);
    }
  },
  computed: {
    agentInfo() {
      return this.$store.getters.agentInfo;
    }
  }
};
</script>
<style lang='less' scoped>
.productdetails {
  padding-bottom: 77px;
  .productdetails_contents {
    width: 100%;
    img {
      width: 100%;
    }
  }
  .productdetails_but {
    width: 80%;
    height: 80px;
    background: #ffb72f;
    border: #ffb72f;
    border-radius: 40px;
    margin: auto;
    margin-top: 40px;
    font-size: 30px;
  }
  .depositNotice {
    font-size: 25px;
    text-align: left;
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 30px;
    font-weight: bold;
  }
  .quest {
    margin-top: 15px;
    background-color: #f8f6f6;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    font-weight: normal;
    padding: 10px 30px;
    margin-bottom: 0px;
  }
}
</style>